<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="maptitle" style="position: relative;font-family: 'font1';">
     <div style="display: flex; justify-content:center; margin-left:50px; " @click="showModal(1)">
       <div style="position: absolute;top:40px">{{data.shoururaning}}</div>
       <div style="position: absolute;bottom:10px">{{data.shoururaningtext}}</div>
       <img src="@/assets/img/切图/收入排名.png" alt="">
     </div>
      <div style="display: flex;justify-content: center" @click="showModal(2)">
        <div style="position: absolute;top:40px">{{data.channengraning}}</div>
        <div style="position: absolute;bottom:10px">{{data.channengraningtext}}</div>
        <img src="@/assets/img/切图/产能排名.png" alt="">
      </div>

    </div>
    <div class="mapwrap" >
      <div style="position: absolute; top: 20%;left: 30%;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/2l.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 90px;top: -29px ;color: #23f9fc">{{data.shouruzengshou}}</div>
        <div style="position: absolute;font-size: 20px;left: 90px;top: 20px">{{data.title1}}</div>
      </div>
      <div style="position: absolute; bottom: 40%;left: 30%;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/3l.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 90px;top: -29px;color: #23f9fc">{{data.shourukongsun}}</div>
        <div style="position: absolute;font-size: 20px;left: 90px;top: 24px">{{data.title2}}</div>
      </div>
      <div style="position: absolute; top: 20%;right: -26.5%;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/2r.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 45px;top: -29px;color: #23f9fc">{{data.channengzengshou}}</div>
        <div style="position: absolute;font-size: 20px;left: 40px;top: 24px">{{data.title3}}</div>
      </div>
      <div style="position: absolute; bottom: 40%;right: -26.5%;transform: translateX(-50%);display: flex;justify-content: space-between;width: 400px;font-family: 'font1'; font-size: 38px;">
        <img src="@/assets/img/切图/3r.png" alt="">
        <div style="position: absolute;font-size: 28px;left: 45px;top: -29px;color: #23f9fc">{{data.channengkongsun}}</div>
        <div style="position: absolute;font-size: 20px;left: 40px;top: 24px">{{data.title4}}</div>
      </div>
      <img src="@/assets/img/切图/CF.png" alt="">
      <div style=" font-family: 'font1';  font-size: 30px; position: absolute;bottom: 2px;left: 50%;transform: translateX(-50%);display: flex;width: 380px;display: flex;justify-content: space-between" >
        <div style="text-align: center">
          <span style="color: #fbd894">{{data.zongshuru}}</span>
          <div style=" height: 50px; line-height: 60px;background: -webkit-linear-gradient(white, #c39c5d);
          text-shadow: 2px 2px 2px  rgba(213, 170, 107,0.2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
             -webkit-text-stroke: 1px #a87303;
 "><img src="../../assets/img/切图/总收入.png" alt=""></div>
        </div>
        <div style="text-align: center">
          <span style="color: #fbd894">{{data.zongchanneng}}</span>
          <div  style="  height: 50px;

  "><img src="../../assets/img/切图/总产能.png" alt=""></div>
        </div>
      </div>
    </div>
    <modal :visible="dialogVisible"  :maskClosable="true" @close="close" >
      <div style=" width: 100%;display: flex;justify-content: center">
       <div style="font-size: 25px; border-bottom: 1px solid #ccc;   width: 450px;text-align: center;padding-bottom: 10px">{{currentTitle}}</div>
        <div></div>
      </div>
      <Echart
          id="rightTop"
          :options="option"
          class="right_top_inner"
          ref="charts"
          height="460px"
          width="100%"
      />
<!--      <div style="height: 300px;width: 100%;">-->
<!--        <Chart3D :dataModal="currentData"/>-->
<!--      </div>-->
    </modal>
  </div>
</template>

<script>
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules";
import * as echarts from "echarts";
import { GETNOBASE } from "api";
import Modal from "@/components/modal/modal.vue";
import Chart3D from "@/components/3dEcharts.vue";
export default {
  components: {Modal, Chart3D},
  props:['data','dataModal'],
  data() {
    return {
      option:{},
      currentTitle:"",
      currentData:[],
      maptitle: "",
      dialogVisible:false,
      options: {},
      code: "china", //china 代表中国 其他地市是行政编码
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
    };
  },
  created() {},

  mounted() {
    // console.log(xzqCode);
    this.getData("china");
  },
  methods: {
    close(){
      this.currentData = null;
      this.dialogVisible = false;
    },
    showModal(type){
     this.dialogVisible = true;
     type == 1? this.currentTitle = "收入排名" : this.currentTitle = "产能排名";
      this.currentData = this.$props.dataModal[`data${type}`];
      var that = this;
      this.option = {
        xAxis: {
          type: 'category',
          data:this.currentData.xAix,
          axisLabel : {//坐标轴刻度标签的相关设置。
            interval : 0, //0：表示全部显示，1：表示隔一个显示一个，2：隔两个显示一个，3：三个显示一个，4：四个显示一个，5：五个显示一个，6：六个显示一个，7：七个显示一个，8：八个显示一个，9：九个显示一个，默认是5。
            formatter : function(params){
              var newParamsName = "";// 最终拼接成的字符串
              var paramsNameNumber = params.length;// 实际标签的个数
              var provideNumber = 4;// 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";// 表示每一次截取的字符串
                  var start = p * provideNumber;// 开始截取的位置
                  var end = start + provideNumber;// 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;// 最终拼成的字符串
                }

              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }
          }
        },
        yAxis: {
          type: 'value'
        },

        tooltip: {
          trigger: 'axis', // 坐标轴触发
          formatter: function (params) {
            // 自定义显示内容
            var result = params[0].name + '<br/>'; // 显示类目名称
            console.log(result,params,"result")
            params.forEach(function (item) {
              console.log(item,"item.seriesName")
              result += '完成值' + ': ' + item.value + '<br/>' + '完成率' + ': ' + that.currentData.xXix[item.dataIndex] + '<br/>'; // 显示系列名称和值
            });
            return result;
          },
        },
        series: [
          {
            color: {
              type: 'linear',
              // x=0,y=1,柱子的颜色在垂直方向渐变
              x: 0,
              y: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 0,
                  color: '#02325c',
                },
                // 50%处的颜色
                {
                  offset: 0.5,
                  color: '#0076b2',
                },
                // 100%处的颜色
                {
                  offset: 1,
                  color: '#04b4e5',
                },
              ],
              global: false, // 缺省为 false
            },
            stack:"a",
            axisLabel: {
              interval: 0  //设置间隔为0
            },
            data: this.currentData.yAix,
            barWidth: '30%',
            itemStyle:{
              borderRadius:[100,100,0,0],
            },
            label:{
              show:true,
              formatter: function(params){
                console.log(params,"params")
                // this.$props.data.xXix[params.dataIndex]
                return that.currentData.xXix[params.dataIndex]
              },
              position:'top',
              color:'#fff',
            },
            backgroundStyle :{

              borderRadius :5
            },
            type: 'bar',
            markPoint: {
              symbol: 'rect',
              symbolSize: [0, 0],
              data: this.currentData.yYAix,
              label: {
                show: true,
                position: 'top',
                color: '#ffffff',
                fontSize: 12,
                fontWeight: 'bold',
                offset: [0, 0]
              },
              itemStyle: {
                color: 'transparent'
              }
            }
          },

        ]

      };


    },
    getData(code) {
      currentGET("big8", { regionCode: code }).then((res) => {
        console.log("设备分布", res);
        if (res.success) {
          this.getGeojson(res.data.regionCode, res.data.dataList);
          this.mapclick();
        } else {
          this.$Message.warning(res.msg);
        }
      });
    },
    /**
     * @description: 获取geojson
     * @param {*} name china 表示中国 其他省份行政区编码
     * @param {*} mydata 接口返回列表数据
     * @return {*}
     */
    async getGeojson(name, mydata) {
      this.code = name;
      //如果要展示南海群岛并且展示的是中国的话
      let geoname=name
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }
      //如果有注册地图的话就不用再注册 了
      let mapjson = echarts.getMap(name);
      if (mapjson) {
        mapjson = mapjson.geoJSON;
      } else {
        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then((res) => {
          return res;
        });
        echarts.registerMap(name, mapjson);
      }
      let cityCenter = {};
      let arr = mapjson.features;
      //根据geojson获取省份中心点
      arr.map((item) => {
        cityCenter[item.properties.name] =
          item.properties.centroid || item.properties.center;
      });
      let newData = [];
      mydata.map((item) => {
        if (cityCenter[item.name]) {
          newData.push({
            name: item.name,
            value: cityCenter[item.name].concat(item.value),
          });
        }
      });
      this.init(name, mydata, newData);
    },
    init(name, data, data2) {
      // console.log(data2);
      let top = 45;
      let zoom = 1.05;
      let option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        visualMap: {
          left: 20,
          bottom: 20,
          pieces: [
            { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
            { gte: 600, lte: 999, label: "600-999个" },
            { gte: 200, lte: 599, label: "200-599个" },
            { gte: 50, lte: 199, label: "49-199个" },
            { gte: 10, lte: 49, label: "10-49个" },
            { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          inRange: {
            // 渐变颜色，从小到大
            color: [
              "#c3d7df",
              "#5cb3cc",
              "#8abcd1",
              "#66a9c9",
              "#2f90b9",
              "#1781b5",
            ],
          },
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: name,
          roam: false,
          selectedMode: false, //是否允许选中多个区域
          zoom: zoom,
          top: top,
          // aspectScale: 0.78,
          show: false,
        },
        series: [
          {
            name: "MAP",
            type: "map",
            map: name,
            // aspectScale: 0.78,
            data: data,
            // data: [1,100],
            selectedMode: false, //是否允许选中多个区域
            zoom: zoom,
            geoIndex: 1,
            top: top,
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name + "：" + params.data["value"];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            label: {
              show: false,
              color: "#000",
              // position: [-10, 0],
              formatter: function (val) {
                // console.log(val)
                if (val.data !== undefined) {
                  return val.name.slice(0, 2);
                } else {
                  return "";
                }
              },
              rich: {},
            },
            emphasis: {
              label: {
                show: false,
              },
              itemStyle: {
                areaColor: "#389BB7",
                borderWidth: 1,
              },
            },
            itemStyle: {
              borderColor: "rgba(147, 235, 248, .8)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺为 false
              },
              shadowColor: "rgba(128, 217, 248, .3)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
          },
          {
            data: data2,
            type: "effectScatter",
            coordinateSystem: "geo",
            symbolSize: function (val) {
              return 4;
              // return val[2] / 50;
            },
            legendHoverLink: true,
            showEffectOn: "render",
            rippleEffect: {
              // period: 4,
              scale: 6,
              color: "rgba(255,255,255, 1)",
              brushType: "fill",
            },
            tooltip: {
              show: true,
              formatter: function (params) {
                if (params.data) {
                  return params.name + "：" + params.data["value"][2];
                } else {
                  return params.name;
                }
              },
              backgroundColor: "rgba(0,0,0,.6)",
              borderColor: "rgba(147, 235, 248, .8)",
              textStyle: {
                color: "#FFF",
              },
            },
            label: {
              formatter: (param) => {
                return param.name.slice(0, 2);
              },

              fontSize: 11,
              offset: [0, 2],
              position: "bottom",
              textBorderColor: "#fff",
              textShadowColor: "#000",
              textShadowBlur: 10,
              textBorderWidth: 0,
              color: "#FFF",
              show: true,
            },
            // colorBy: "data",
            itemStyle: {
              color: "rgba(255,255,255,1)",
              borderColor: "rgba(2255,255,255,2)",
              borderWidth: 4,
              shadowColor: "#000",
              shadowBlur: 10,
            },
          },
        ],
         //动画效果
            // animationDuration: 1000,
            // animationEasing: 'linear',
            // animationDurationUpdate: 1000
      };
      this.options = option;
    },
    message(text) {
      this.$Message({
        text: text,
        type: "warning",
      });
    },
    mapclick() {
      if (this.echartBindClick) return;
      //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
      this.$refs.CenterMap.chart.on("click", (params) => {
        // console.log(params);
        let xzqData = xzqCode[params.name];
        if (xzqData) {
          this.getData(xzqData.adcode);
        } else {
          this.message("暂无下级地市!");
        }
      });
      this.echartBindClick = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  box-sizing: border-box;
  margin-bottom: 30px;
  background: url("../../assets/img/切图/地球.png") center bottom no-repeat;
  .maptitle {
    height: 108px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 500px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: #fff;

  position: fixed;
  top: 100px;
  left: 300px;
  width: calc(100% - 600px);
  height:calc(100% - 200px);
  z-index: 2
}
.btn {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid blue;
  padding: 4px 12px;
}
</style>
